<template>
  <main>
    <div>
      <div class="flex">
        <el-input v-model="codes" :rows="8" type="textarea" />
        <el-input v-model="info" :rows="8" type="textarea" />
      </div>
      <div class="flex">
        <div class="left" style="flex: 1">
          <van-button @click="flush()" style="width: 100%"> 刷新 </van-button>
          <div class="warp">
            <img v-for="(e, i) in imgs" :key="i" :src="e" @click="view(e, i)" />
          </div>
        </div>
        <div class="right">
          <van-icon name="replay" color="#FF7E1F" size="28" @click="init()" /><br />
          <van-stepper v-model="diff" min="0.01" step="0.01" /><br />
          <van-stepper v-model="number" min="100" step="100" /><br />

          {{ (diff * number).toFixed(2) }}

          <div v-for="(e, i) in 10" :key="i" style="display: flex; flex-direction: row">
            <text class="num">{{ (i + 1) * 100 }}</text> <text class="num"> {{ ((i + 1) * 100 * diff).toFixed(2) }} </text>
          </div>

          <van-stepper v-model="m1" min="0.01" step="0.01" />
          <van-stepper v-model="n1" min="100" step="100" /><br />

          <van-stepper v-model="m2" min="0.01" step="0.01" />
          <van-stepper v-model="n2" min="100" step="100" /><br />

          {{ ((m1 * n1 + m2 * n2) / (n1 + n2)).toFixed(2) }}
        </div>
      </div>
    </div>
  </main>
</template>

<script>
import service from "../../common/api.js";
import { showImagePreview } from "vant";
var res;
export default {
  template: ``,
  data() {
    return {
      codes: `
sz000610,sz002610,sh600977,sz000807,sh600556,sh600556,sz300058,sz002354
		`,
      info: `
每日关注:
sz000610 12~17
sz002610 2.2~3
		`,
      imgs: [],
      // 盈利计算
      diff: 0.1,
      number: 500,
      // 均摊计算
      m1: 10,
      n1: 500,
      m2: 10,
      n2: 500,
    };
  },

  computed: {
    value() {
      return this.diff * this.number;
    },
  },

  async created() {
    // var c = localStorage.getItem("codes");
    //var i = localStorage.getItem("info");
    var res = await service.post("/stock/api/stocks", {});
    if (res.stocks) {
      this.codes = res.stocks;
      this.info = res.info;
    }
    this.flush();
  },
  methods: {
    init() {
      this.diff = 0.01;
      this.number = 500;
      this.m1 = 10;
      this.n1 = 500;
      this.m2 = 10;
      this.n2 = 500;
    },
    flush() {
      var host = "http://image.sinajs.cn/newchart";
      var tmp = [];
      this.codes
        .trim()
        .split(",")
        .map((code) => {
          if (!code) return;
          tmp.push(`${host}/daily/n/${code}.gif`);
          //tmp.push(`${host}/weekly/n/${code}.gif`)
          tmp.push(`${host}/min/n/${code}.gif`);
        });
      this.imgs = tmp;
      service.post("/stock/api/stocks", { info: this.info, stocks: this.codes });
      //localStorage.setItem("codes", this.codes);
      //localStorage.setItem("info", this.info);
    },
    view(e, i) {
      showImagePreview({ images: this.imgs, startPosition: i, closeable: true });
    },
  },
};
</script>

<style scoped>
text {
  display: inline-block;
  min-width: 40px;
}
.num {
  width: 50px;
  text-align: right;
  margin-right: 10px;
}
.warp {
  height: calc(100vh - 250px);
  overflow: auto;
}
.right {
  text-align: center;
}
textarea {
  height: 300px;
}

.warp img {
  max-width: 420px;
}
@media (max-width: 600px) {
  .warp img {
    max-width: calc(100vw - 100px);
  }
}
</style>
